<template>
  <div class="search">
    <!-- 导航 -->
    <van-nav-bar
      title="搜索"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 搜索 -->
    <van-search
      v-model="keyWord"
      show-action
      placeholder="请输入搜索关键词"
      action-text="搜索"
      @input="input()"
      @search="search(keyWord)"
    >
      <template #action>
        <div @click="search(keyWord)">搜索</div>
      </template>
    </van-search>
    <!-- 搜索联想 -->
    <van-cell-group v-if="sugList.length>0">
      <van-cell v-for="(item,index) in sugList" :key="index" icon="search" @click="search(item)">
        <template #title>
          <div v-html=" highLight(item)" />
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录  -->
    <van-cell-group v-else title="历史记录">
      <van-cell v-for="item in searchList" :key="item" :title="item" @click="search(item)">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="close" @click.stop="del(item)" />
        </template>
      </van-cell>
    </van-cell-group>

  </div>

</template>

<script>
import { getSearchList, setSearchList } from '@/utils/localstorage'
import { reqSuggestionKeyword } from '@/api/search'
export default {
  name: 'Search',
  data() {
    return {
      keyWord: '',
      sugList: [],
      timer: null,
      searchList: getSearchList()
    }
  },
  methods: {
    // 需求：由于搜索框频繁发送请求，这里需要防抖来节省资源
    // 1.把需要执行的代码放到延时器里面500后执行
    // 2.如果在500内再次触发input事件 将会关闭延时器  重新开启一个延时器（重新计时）
    input() {
      // const timer
      clearTimeout(this.timer)
      if (!this.keyWord) {
        this.sugList = []
        return
      }

      // 为什么我删除不是发送一次请求

      this.timer = setTimeout(async() => {
        const res = await reqSuggestionKeyword(this.keyWord)
        this.sugList = res.data.options
      }, 300)
    },
    // 需求：搜索关键字的高亮
    // 1.利用正则找到需要高亮的字体
    // 2.利用字符串的replace把需要高亮的字替换成一段有结构的span结构
    highLight(str) {
      // console.log('str', str, 'this,keyword', this.keyWord)
      if (!this.keyWord) return str
      return str.replace(new RegExp(this.keyWord, 'gi'), function(match) {
        // 当input为空的时候为什么 这个函数有执行了70 80次
        // console.log(typeof match)

        return `<span style="color:red;">${match}</span>`
      })
    },
    search(keyWord) {
      console.log('11')
      // 添加历史记录且不能相同

      // 等于keyword删除

      this.searchList = this.searchList.filter(item => (item !== keyWord.toUpperCase()) && (item !== keyWord.toLowerCase()))
      console.log('111')
      console.log(this.searchList, keyWord.toUpperCase())
      this.searchList.unshift(keyWord)
      console.log('跳转', keyWord)
      this.$router.push({
        path: '/search/result',
        query: {
          keyWord
        }
      })
      setSearchList(this.searchList)
    },
    // 删除历史记录
    del(itemDel) {
      this.searchList = this.searchList.filter(item => item !== itemDel)
      setSearchList(this.searchList)
    }
  }
}
</script>

<style>

</style>
